<!-- 新增/编辑机房 -->
<template>
  <Dialogdrawerdefect :ddtvisible.sync="visible" size="505px" @close="handleCancel">
    <div class="col-right" v-loading="loading">
      <span class="name">{{curStatus === pageStatus.edit ? '编辑机房':'新建机房'}}</span>
      <el-form inline class="rule-form" ref="form" :model="ruleForm" :rules="rules">
        <el-form-item label="医院名称:" label-width="92px" prop="hospitalName" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.hospitalCode" placeholder="请选择">
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
              @change="handleChange('hospital')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="医院编码:" label-width="92px" prop="hospitalCode" class="short-input">
          <el-input size="small" v-model="ruleForm.hospitalCode" placeholder="请输入" disabled></el-input>
        </el-form-item>
        <el-form-item label="影像区域:" label-width="92px" prop="depArea" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.depArea" placeholder="请选择" collapse-tags @change="handleChange('depArea')">
            <el-option
              v-for="(item,index) in depAreaOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行科室:" label-width="92px" prop="department" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.department" placeholder="请选择" collapse-tags @change="handleChange('department')">
            <el-option
              v-for="(item,index) in departmentOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门:" label-width="92px" prop="dep" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.dep" placeholder="请选择" collapse-tags @change="handleChange('dep')">
            <el-option
              v-for="(item,index) in depOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称:" label-width="92px" prop="modality" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.modality" placeholder="请选择" collapse-tags>
            <el-option
              v-for="(item,index) in modalityOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机房分组:" label-width="92px" prop="checkGroup" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.checkGroup" placeholder="请选择" collapse-tags>
            <el-option
              v-for="(item,index) in groupOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机房名称:" label-width="92px" prop="checkRoom" class="short-input">
          <el-input size="small" v-model="ruleForm.checkRoom" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="机房状态:" label-width="92px" prop="checkRoomState" class="short-input">
          <el-select size="small" class="param-type_input" v-model="ruleForm.checkRoomState" placeholder="请选择" collapse-tags>
            <el-option
              v-for="(item,index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="AETITLE:" label-width="92px" prop="aeTitle" class="short-input">
          <el-input size="small" v-model="ruleForm.aeTitle" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="检查地点:" label-width="92px" prop="modalityAddress" class="short-input">
          <el-input size="small" v-model="ruleForm.modalityAddress" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="注意事项:" label-width="92px" prop="remark1" class="short-input">
          <el-input size="small" v-model="ruleForm.remark1" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="buttons">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="reset">重置表单</el-dropdown-item>
              <el-dropdown-item command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="right-buttons">
            <el-button class="floatR m-l-1" type="primary" size="small" @click="handleConfirm">确定</el-button>
            <el-button class="floatR" size="small" @click="handleClose">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </Dialogdrawerdefect>
</template>

<script>
import { getDepAreaList, getDepList, getModalityList, getItemList, getCheckGroupList, addCheckroom, editCheckroom, deleteCheckroom } from '@/api/api.js'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
import { PageStatus } from '@/utils/constant'
export default {
  name: '',
  mixins: [],
  components: { Dialogdrawerdefect },
  props: {
    showRight: {
      Boolean,
      default: false
    },
    curStatus: {
      Object,
      default: {}
    },
    rowData: {
      Object,
      default: () => {}
    }
  },
  data() {
    return {
      pageStatus: PageStatus,
      ruleForm: {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: '',
        department: '',
        dep: '',
        modality: '',
        checkGroup: '',
        checkRoom: '',
        checkRoomState: '正常',
        aeTitle: '',
        modalityAddress: '',
        remark1: ''
      },
      rules: {
        depArea: { required: true, message: '请选择影像区域', trigger: 'blur' },
        department: { required: true, message: '请选择执行科室', trigger: 'blur' },
        dep: { required: true, message: '请选择检查部门', trigger: 'blur' },
        modality: { required: true, message: '请选择设备名称', trigger: 'blur' },
        checkGroup: { required: true, message: '请选择机房分组', trigger: 'blur' },
        checkRoom: [
          { required: true, message: '请输入机房名称', trigger: 'blur' }
        ],
        checkRoomState: { required: true, message: '请选择机房状态', trigger: 'blur' }
      },
      visible: false,
      depAreaOptions: [],
      depOptions: [],
      modalityOptions: [],
      groupOptions: [],
      departmentOptions: [],
      modalityAddressOptions: [],
      loading: false,
      statusOptions: [
        {
          label: '正常',
          value: '正常'
        },
        {
          label: '关闭',
          value: '关闭'
        }
      ]
    }
  },
  watch: {
    visible(val) {
      this.$emit('update:showRight', val)
    },
    showRight(val) {
      this.visible = val
    },
    rowData(val) {
      if (val) {
        this.ruleForm = JSON.parse(JSON.stringify(val))
      }
    }
  },
  computed: {},
  created() {

  },
  mounted() {
    this.visible = this.showRight
    this.$getHospitalList()
    this.ruleForm.hospitalCode = this.$store.state.user.hospitalCode
    this.getDepAreaOptions()
    this.getDepOptions()
    this.getModalityOptions()
    this.getDepartment()
    this.getCheckGroupOptions()
  },
  methods: {
    handleClose() {
      this.$emit('update:showRight', false)
      this.handleCancel()
    },
    handleCancel() {
      // 关闭弹窗
      this.$emit('update:rowData', null)
      this.handleReset()
    },
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.curStatus === this.pageStatus.add) {
            /* 新增保存 */
            this.addSave()
          } else {
            /* 编辑保存 */
            this.editSave()
          }
        }
      })
    },
    handleReset() {
      /* 重置 */
      let data = {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: '',
        department: '',
        dep: '',
        modality: '',
        checkGroup: '',
        checkRoom: '',
        checkRoomState: '正常',
        aeTitle: '',
        modalityAddress: '',
        remark1: ''
      }
      this.ruleForm = Object.assign(this.ruleForm, data)
    },
    delete() {
      /* 删除 */
      this.$confirm('此操作将永久删除该机房, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteData() {
      deleteCheckroom({ id: this.ruleForm.id }).then((res) => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.handleClose()
          this.refresh()
        }
      })
    },
    refresh() {
      this.$emit('refresh')
    },
    addSave() {
      /* 新增保存 */
      this.loading = true
      let hospital = this.mx_hospitalList.find((e) => {
        return e.code === this.ruleForm.hospitalCode
      })
      let data = {
        ...this.ruleForm,
        hospitalName: hospital.name
      }
      addCheckroom(data).then((res) => {
        this.loading = false
        if (res.code === 10000) {
          this.$message.success('保存成功')
          this.visible = false
          this.refresh()
        }
      }).catch(() => {
        this.loading = true
      })
    },
    editSave() {
      /* 编辑保存 */
      this.loading = true
      let hospital = this.mx_hospitalList.find((e) => {
        return e.code === this.ruleForm.hospitalCode
      })
      let data = {
        ...this.ruleForm,
        hospitalName: hospital.name
      }
      editCheckroom(data).then((res) => {
        this.loading = false
        if (res.code === 10000) {
          this.$message.success('保存成功')
          this.visible = false
          this.refresh()
        }
      }).catch(() => {
        this.loading = true
      })
    },
    handleCommand(command) {
      switch (command) {
        case 'reset':
          this.handleReset()
          break
        case 'delete':
          this.delete()
          break
        default:
          break
      }
    },
    getDepAreaOptions() {
      getDepAreaList({ hospitalCode: this.ruleForm.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
    },
    getDepOptions() {
      getDepList({ hospitalCode: this.ruleForm.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depOptions = res.content.list
        }
      })
    },
    getModalityOptions() {
      getModalityList({ hospitalCode: this.ruleForm.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.modalityOptions = res.content.list
        }
      })
    },
    getDepartment() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        // DepArea: this.ruleForm.depArea,
        type: '科室'
      }
      getItemList(data).then(res => {
        if (res && res.code === 10000) {
          this.departmentOptions = res.content.list.map(_item => _item.item)
        }
      })
    },
    getCheckGroupOptions() {
      let data = {
        HospitalCode: this.ruleForm.hospitalCode,
        dep: this.ruleForm.dep
      }
      getCheckGroupList(data).then(res => {
        if (res && res.code === 10000) {
          this.groupOptions = res.content.list
        }
      })
    },
    handleChange(val) {
      switch (val) {
        case 'hospital':
          this.getDepAreaOptions()
          this.getDepartment()
          this.getDepOptions()
          this.getModalityOptions()
          this.getCheckGroupOptions()
          this.ruleForm.depArea = ''
          this.ruleForm.department = ''
          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          break
        case 'depArea':
          this.getDepartment()
          this.getDepOptions()
          this.getModalityOptions()
          this.getCheckGroupOptions()
          this.ruleForm.department = ''
          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          break
        case 'department':
          this.getDepOptions()
          this.getModalityOptions()
          this.getCheckGroupOptions()
          this.ruleForm.dep = ''
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          break
        case 'dep':
          this.getModalityOptions()
          this.getCheckGroupOptions()
          this.ruleForm.modality = ''
          this.ruleForm.checkGroup = ''
          break
        default:
          break
      }
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.col-right{
        border-left: 1px solid #e5e5e5;
        padding: 21px 24px;
        color: #606266;
        // width:640px;
        background-color: #FFFFFF;
        // float:right;
        .short-input{
            width: 200px;
            margin-right: 19px!important;
            .el-input{
                width: 200px;
            }
        }
        .describe-input{
            width: 350px;
            .el-input{
                width: 350px;
            }
        }
        .name{
            font-weight: bold;
        }
        .rule-form{
            margin-top: 30px;
        }
        .el-form--inline .el-form-item{
            margin-right:0px
        }
        .buttons{
            width: 100%;
            border-top: 1px solid #E5E7EC;
            padding: 12px 0px 0px;
            margin-bottom: 0px;
            /deep/ .el-form-item__content{
                width:100%
            }
            .right-buttons{
                float:right
            }
            .el-dropdown{
                color: #00c0ef;
            }
        }
    }
</style>
